<template>
  <div class="mt-4">
    <NRow :gutter="24">
      <NCol :span="24">
        <n-card content-style="padding: 0;" :bordered="false">
          <p style="font-size: 16px; margin-top: 20px; margin-left: 20px">退款统计</p>
          <n-space justify="end" style="margin-top: 18px; margin-bottom: 18px">
            <n-radio
              :checked="checkedValue === '7'"
              @change="handleChange"
              value="7"
              name="basic-demo"
            >
              近7天
            </n-radio>
            <n-radio
              :checked="checkedValue === '30'"
              @change="handleChange"
              value="30"
              name="basic-demo"
            >
              近30天
            </n-radio>
          </n-space>

          <div ref="chartRef" :style="{ height, width }"></div>
        </n-card>
      </NCol>
    </NRow>
  </div>
</template>
<script lang="ts">
import { defineComponent, ref, onMounted } from 'vue';
import Refundreport from './refund/Refundreport.vue';
import { getRefundDate } from '@/api/report/refundReport';
import { createStorage } from '@/utils/Storage';

import { useECharts } from '@/hooks/web/useECharts';

import { basicProps } from './props';

const Storage = createStorage({ storage: localStorage });
export default defineComponent({
  // components: { Refundreport },
  props: basicProps,
  setup() {
    const salesValue = ref();
    const chartRef = ref<HTMLDivElement | null>(null);
    const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>);

    const checkedValueRef = ref('7');
    function changeDay(e) {
      console.log(e);
    }

    // 点击不同天数获取不同报表数据
    async function handleChange(e) {
      checkedValueRef.value = e.target.value;
      console.log(e.target.value);
      let amount = e.target.value;
      let metNo = Storage.get('custNo');
      const data = await getRefundDate({ amount, metNo });
      console.log(data);
      salesValue.value = data.data.body;
      let day = salesValue.value.map((item) => item.date);

      let totalAmt = salesValue.value.map((item) => item.totalAmt);
      let totalRefund = salesValue.value.map((item) => item.totalRefund);
      setOptions({
         tooltip: {
            trigger: 'axis',
            axisPointer: {
              lineStyle: {
                width: 1,
                color: '#019680',
              },
            },
          },
        toolbox: {},
        legend: {
          data: ['退款比数', '退款金额'],
        },
        grid: { left: '1%', right: '1%', top: '15  %', bottom: 0, containLabel: true },
        xAxis: [
          {
            type: 'category',
            data: day,
            axisPointer: {
              type: 'shadow',
            },
          },
        ],
        yAxis: [
          {
            type: 'value',
            name: '退款金额',
            min: 0,
            max: 2500,
            interval: 500,
            axisLabel: {
              // formatter: '{value} °C'
            },
          },
          {
            show: false,
            type: 'value',
            name: '退款比数',
            min: 0,
            max: 2500,
            interval: 500,
            axisLabel: {
              // formatter: '{value} ml'
            },
          },
        ],
        series: [
          {
            name: '退款比数',
            type: 'bar',
            data: totalRefund,
          },
          {
            name: '退款金额',
            type: 'bar',
            yAxisIndex: 1,
            data: totalAmt,
          },
        ],
      });
    }

    // 默认选择近7天获取数据
    onMounted(async () => {
      let metNo = Storage.get('custNo');
      let amount = '7';
      console.log({ amount });
      const data = await getRefundDate({ amount, metNo });
      console.log(data);
      salesValue.value = data.data.body;
      let day = salesValue.value.map((item) => item.date);

      let totalAmt = salesValue.value.map((item) => item.totalAmt);
      let totalRefund = salesValue.value.map((item) => item.totalRefund);
      setOptions({
         tooltip: {
            trigger: 'axis',
            axisPointer: {
              lineStyle: {
                width: 1,
                color: '#019680',
              },
            },
          },
        toolbox: {},
        legend: {
          data: ['退款比数', '退款金额'],
        },
        grid: { left: '1%', right: '1%', top: '15  %', bottom: 0, containLabel: true },
        xAxis: [
          {
            type: 'category',
            data: day,
            axisPointer: {
              type: 'shadow',
            },
          },
        ],
        yAxis: [
          {
            type: 'value',
            name: '退款金额',
            min: 0,
            max: 2500,
            interval: 500,
            axisLabel: {
              // formatter: '{value} °C'
            },
          },
          {
            show: false,
            type: 'value',
            name: '退款比数',
            min: 0,
            max: 2500,
            interval: 500,
            axisLabel: {
              // formatter: '{value} ml'
            },
          },
        ],
        series: [
          {
            name: '退款比数',
            type: 'bar',
            data: totalRefund,
          },
          {
            name: '退款金额',
            type: 'bar',
            yAxisIndex: 1,
            data: totalAmt,
          },
        ],
      });
    });

    // 传参
    // provide('salesValue', salesValue);
    return {
      chartRef,
      // provide,
      checkedValue: checkedValueRef,
      handleChange,
    };
  },
});
</script>
